<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="shortcut icon" href="<%=basePath%>/img/男女混合.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/login.css">
    <script src="<%=basePath%>/js/jquery-3.6.3.min.js"></script>
    <script src="<%=basePath%>/js/jquery.validate.min.js"></script>
    <style>
        .footer {
            box-sizing: border-box;
            position: absolute;
            bottom: 40px;
            width: 100%;
            height: 45px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #666;
            line-height: 37px
        }

        @font-face {
            font-family: "Soph";
            src: url("LucySaidOkPersonalUseItalic-OV9ee.ttf");
        }

        .footer span {
            font-family: "Soph";
            color: #d34e6d;
            font-size: 45px;
        }

        .footer a {
            text-decoration: none;
            color: #d34e6d;
        }
    </style>
</head>
<body>
    <form action="UserServlet?method=login" method="post" id="registerForm" enctype="multipart/form-data">
        <p class="title">Login</p>
        <div class="inputBox">
            <input type="text" placeholder="name" name="name" id="name">
        </div>
        <div class="inputBox">
            <input type="password" placeholder="password" name="password" id="password">
        </div>
        <div class="inputBox">
            <input type="text" id="inputCode" name="inputCode" placeholder="请输入验证码">
            <%--  注意：图片的地址是一个servlet --%>
            <img src="GifCaptchaUtil" id="autoCode" onclick="changeCode()">
        </div>
        <div class="buttom">
            <input type="submit" value="Login">
            <input type="reset" value="Reset">
        </div>
        <div class="tip">
            <div class="remember">
                <label for="rememberMe">记住密码</label>
                <input type="checkbox" id="rememberMe" name="rememberMe">
            </div>
            <p class="register">没有账号? <a href="register.jsp">注册</a></p>
        </div>
        <span style="color: red">${resultVO}</span>
    </form>

    <div class="footer">
        <span>Love Sophie</span>
        <p>Copyright © 2016-2018 <a href="">Power by Rowena</a></p>
    </div>

    <script>
        function getUserInfo() {
            let cookie = document.cookie;
            let cookies = cookie.split("; ");
            let userInfo = "";
            for(let ck of cookies){
                let arr = ck.split("=");
                let name = arr[0];
                let value = arr[1];
                if(name == 'userInfo'){
                    userInfo=value;
                    break;
                }
            }
            if(userInfo != ""){
                document.querySelector("#name").value = userInfo.split(":")[0];
                document.querySelector("#password").value = userInfo.split(":")[1];
                document.querySelector("#rememberMe").checked=true;
            }
        }

        window.onload=function(){
            getUserInfo();
        }
        function changeCode() {
            document.querySelector("#autoCode").
                src = "GifCaptchaUtil?randomTime=" + new Date().getTime();
        }
        $(function(){
            // 在键盘按下并释放及提交后验证提交表单
            $("#registerForm").validate({
                //规则
                rules:{
                    name:{required:true,rangelength:[2,10]},
                    password:{required:true,minLength:[6,15]},

                },
                //错误提示消息
                messages:{
                    name:{required:"请输入用户名!",rangelength:"用户名长度在5到10之间!"},
                    password: {required:"请输入密码！",minLength: "密码长度在6到15之间"},
                }
            });
        })
    </script>
</body>
</html>